<script lang="ts" setup>
// @ts-ignore
import system from "~/config/SystemConfig";

definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'page-template page-template-page-friends-add page'
    },
    title: '与我成为朋友-' + system.slogan
})
const addTitle = ref('与我成为朋友')
const addDesc = ref('我非常并且迫切地希望能在您热情地提交之前，看到我们的交流互动，生活博客比较看重仪式感，所以不妨让我们互相了解使得连接更紧实吧。')
const appStore = useAppStore()
let websiteConfig = computed(() => {
    return appStore.websiteConfig
})
</script>

<template>
    <NuxtLayout name="grid">
        <template v-slot:nav>
            <Nav :title="'与我成为朋友'"/>
        </template>
        <template v-slot:main>
            <PageHeader :title="addTitle" :desc="addDesc">
                <template v-slot:other>
                    <nav class="taxonomy-des fade-before fade-after">
                        <ul id="copy" class="my-info">
                            <li @click="copyInfo(websiteConfig.name)" class="web-site-name">
                                <span>站名</span><em>{{ websiteConfig.name }}</em>
                            </li>
                            <li @click="copyInfo(websiteConfig.authorIntro)">
                                <span>简述</span><em>{{ websiteConfig.authorIntro }}</em>
                            </li>
                            <li @click="copyInfo('3303295829@qq.com')" class="web-site-email">
                                <span>邮箱</span><em>3303295829@qq.com</em>
                            </li>
                            <li @click="copyInfo(websiteConfig.websiteUrl)" class="web-site-link">
                                <span>链接</span><em>{{ websiteConfig.websiteUrl }}</em>
                            </li>
                            <li @click="copyInfo(websiteConfig.websiteUrl)" class="web-site-rss">
                                <span>订阅</span><em>{{ websiteConfig.websiteUrl }}</em>
                            </li>
                            <li @click="copyInfo(websiteConfig.websiteAvatar)" class="web-site-logo">
                                <span>标识</span><em>{{ websiteConfig.websiteAvatar }}</em>
                            </li>
                        </ul>
                    </nav>
                </template>
            </PageHeader>
            <article class="page status-publish hentry">
                <section id="add-content" class="entry-content">
                    <h6 class="wp-block-heading">说明</h6>
                    <ul class="add-content-info">
                        <li>
                            <strong>要求</strong>
                            <br>交流互动并且保持联系；
                            <br>至少有 10 篇原创文章；
                            <br>请提前做好本站链接。
                        </li>
                        <li>
                            <strong>顺序</strong>
                            <br>首序：添加顺序为基础；
                            <br>次序：然后以 RSS 动态里第一条的时间逐个降序。
                        </li>
                        <li>
                            <strong>背景</strong>
                            <br>每天由 wordpress 截图自动生成，如果 WP.COM 所属服务器的
                            IP（在国外）无法访问您的站点或访问 IP 不稳定，则背景会出现错误。
                        </li>
                    </ul>
                    <ApplyFriend/>
                </section>
            </article>
            <nav class="navigation page-navigation" role="navigation">
                <a class="color-btn icon-left" href="/friends" role="button">
                    <small>返回</small>
                </a>
            </nav>
        </template>
    </NuxtLayout>
</template>
<style scoped>
/* 表单 */
body {
    background: radial-gradient(circle at 25% 65%, rgb(var(--color-rgb) / .2), #0000 25%) no-repeat fixed, radial-gradient(circle at 75% 35%, rgb(var(--color-sub-rgb) / .2), #0000 25%) no-repeat fixed, var(--h-bg);
}

.hentry {
    padding: var(--edge-lr) calc(var(--edge-lr) * 2) var(--edge-lr) var(--edge-lr);
    background: var(--s-bg, rgb(255 255 255 / .7));
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius) 0 0 var(--radius);
    margin-right: calc(var(--edge-lr) * -1);
}

.entry-content {
    --content-width: 1000px;
    margin-left: 0;
}

.add-content-info {
    display: grid;
    gap: 1rem;
    grid: auto / repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    margin: 0;
    list-style: none;
}

.add-content-info li {
    background: var(--s-bg, rgb(255 255 255 / .7));
    padding: 1rem;
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
}

.my-info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem;
}

.my-info li {
    position: relative;
    flex: none;
    white-space: pre;
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;
    transition: .3s;
}

.my-info li:hover {
    color: rgb(var(--color-rgb) / .7);
}

.my-info li::before {
    content: "";
    width: 6px;
    height: 150%;
    background: linear-gradient(180deg, #0000, rgb(var(--color-rgb) / 20%), #0000) no-repeat center / 2px 100%, radial-gradient(circle, rgb(var(--color-rgb) / 70%) 50%, #0000 50%) no-repeat center / 6px 6px;
    position: absolute;
    top: 0;
    left: -1rem;
    bottom: 0;
    margin: auto;
    transition: .5s;
}

.my-info li::after {
    content: "\e637";
    font-family: iconfont;
    margin: 0 0 0 -.5em;
}

.my-info em {
    font-size: .5rem;
}

div#copySuccessMessage {
    position: absolute;
    bottom: 0;
    line-height: 1;
    padding: calc(var(--button-size, 4em) / 4);
    background: linear-gradient(135deg, rgb(var(--color-rgb) / .8), rgb(var(--color-sub-rgb) / .8)) !important;
    box-shadow: 0 0 1rem 0 rgb(var(--color-rgb) / .2), 0 0.5rem 1rem -0.5rem rgb(var(--color-rgb) / .5);
    border-radius: 2em;
    color: white;
    font-size: .5rem;
}

.friend-form {
    margin: 2rem 0 0;
}

.friend-form ul {
    display: flex;
    flex-direction: column;
    margin: 1rem 0 2rem;
    list-style: none;
    gap: 1rem;
}

.friend-form :is(.id, .info) p {
    border-radius: var(--radius);
    min-height: 2rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.friend-form .id li {
    font-size: .55rem;
    line-height: 2;
}

.friend-form em {
    color: rgb(var(--color-rgb));
    margin: .5em;
    font-size: .5rem;
    vertical-align: middle;
    line-height: 2;
    display: inline-block;
}

.friend-form ul em {
    margin: .5em 0 0;
    color: hsl(var(--font-color) / .5);
}

</style>
